<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品集 - 墨韵·数字水墨艺术</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/zuopin.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="loader-container">
        <div class="loader"></div>
        <div class="loader-text">墨韵 道法自然</div>
    </div>
    
    <header class="main-header">
        <div class="logo">
            <h1>墨韵</h1>
            <span class="subtitle">数字水墨艺术馆</span>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="zuopin.html" class="active">作品集</a></li>
                <li><a href="philosophy.html">艺术理念</a></li>
                <li><a href="digital-technology.html">数字技术</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="hero works-hero">
            <div class="hero-content">
                <h2>作品集</h2>
                <p>探索数字水墨艺术的无限可能</p>
            </div>
        </section>
        
        <section class="works-filter">
            <div class="filter-container">
                <button class="filter-btn active" data-filter="all">全部作品</button>
                <button class="filter-btn" data-filter="landscape">山水系列</button>
                <button class="filter-btn" data-filter="bamboo">墨竹系列</button>
                <button class="filter-btn" data-filter="abstract">抽象水墨</button>
                <button class="filter-btn" data-filter="interactive">交互装置</button>
            </div>
        </section>
        
        <section class="works-gallery">
            <div class="works-grid">
                <!-- 山水系列 -->
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work1.jpg"></div>
                    <div class="work-info">
                        <h3>山水无尽</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">数字山水长卷，展现中国传统山水画的意境与现代数字技术的完美结合。</p>
                        <a href="#" class="view-work" data-id="1">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work4.jpg"></div>
                    <div class="work-info">
                        <h3>云海日出</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">数字水墨山水，展现云海日出的壮丽景象，传统与现代的完美交融。</p>
                        <a href="#" class="view-work" data-id="4">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work7.jpg"></div>
                    <div class="work-info">
                        <h3>高山流水</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">动态水墨山水，展现高山流水的灵动之美，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="7">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work10.jpg"></div>
                    <div class="work-info">
                        <h3>山川秀美</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">数字山水画作，展现中国山水的秀美与雄浑，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="10">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work13.jpg"></div>
                    <div class="work-info">
                        <h3>云雾缭绕</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">数字水墨山水，展现云雾缭绕的神秘意境，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="13">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work16.jpg"></div>
                    <div class="work-info">
                        <h3>山水清音</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">动态水墨山水，展现山水之间的清幽意境，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="16">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work19.jpg"></div>
                    <div class="work-info">
                        <h3>峰峦叠嶂</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">数字山水长卷，展现峰峦叠嶂的壮丽景象，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="19">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work22.jpg"></div>
                    <div class="work-info">
                        <h3>江水东流</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">动态水墨山水，展现江水东流的壮阔景象，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="22">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="landscape">
                    <div class="work-image" data-src="images/work25.jpg"></div>
                    <div class="work-info">
                        <h3>山水之间</h3>
                        <p class="work-category">山水系列</p>
                        <p class="work-desc">数字水墨山水，展现山水之间的和谐之美，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="25">查看详情</a>
                    </div>
                </div>
                
                <!-- 墨竹系列 -->
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work2.jpg"></div>
                    <div class="work-info">
                        <h3>墨竹清风</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">交互式墨竹，随风摇曳，光影变幻，感受传统竹文化的悠远意境。</p>
                        <a href="#" class="view-work" data-id="2">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work5.jpg"></div>
                    <div class="work-info">
                        <h3>竹影婆娑</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">数字墨竹装置艺术，光影交错，虚实相生，感受竹文化的精神内涵。</p>
                        <a href="#" class="view-work" data-id="5">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work8.jpg"></div>
                    <div class="work-info">
                        <h3>竹韵悠然</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">数字墨竹作品，展现竹子的高雅气质与坚韧精神，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="8">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work11.jpg"></div>
                    <div class="work-info">
                        <h3>竹林深处</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">交互式墨竹装置，观众的移动将改变竹林的光影效果，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="11">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work14.jpg"></div>
                    <div class="work-info">
                        <h3>翠竹清影</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">数字墨竹作品，展现竹子的清雅之美与坚韧之魂，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="14">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work17.jpg"></div>
                    <div class="work-info">
                        <h3>竹林月色</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">动态墨竹作品，展现月光下竹林的静谧之美，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="17">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work20.jpg"></div>
                    <div class="work-info">
                        <h3>竹韵生风</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">交互式墨竹装置，观众的触摸将引发竹叶的轻微摆动，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="20">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work23.jpg"></div>
                    <div class="work-info">
                        <h3>竹林幽静</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">数字墨竹作品，展现竹林的幽静之美与深远意境，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="23">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="bamboo">
                    <div class="work-image" data-src="images/work26.jpg"></div>
                    <div class="work-info">
                        <h3>竹影摇曳</h3>
                        <p class="work-category">墨竹系列</p>
                        <p class="work-desc">动态墨竹作品，展现竹影在风中的摇曳之美，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="26">查看详情</a>
                    </div>
                </div>
                
                <!-- 抽象水墨 -->
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work3.jpg"></div>
                    <div class="work-info">
                        <h3>云山雾罩</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">动态水墨云雾，探索传统水墨在数字空间中的全新表现方式。</p>
                        <a href="#" class="view-work" data-id="3">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work6.jpg"></div>
                    <div class="work-info">
                        <h3>墨色涟漪</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">数字水墨动态作品，模拟墨汁在水中的扩散与融合，探索色彩与形态的无限可能。</p>
                        <a href="#" class="view-work" data-id="6">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work9.jpg"></div>
                    <div class="work-info">
                        <h3>墨舞飞扬</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">动态水墨作品，展现墨色在数字空间中的自由舞动，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="9">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work12.jpg"></div>
                    <div class="work-info">
                        <h3>水墨交融</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">数字水墨作品，展现墨与水的完美交融，创造独特的视觉效果。</p>
                        <a href="#" class="view-work" data-id="12">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work15.jpg"></div>
                    <div class="work-info">
                        <h3>墨色迷离</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">动态水墨作品，展现墨色在数字空间中的迷离变化，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="15">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work18.jpg"></div>
                    <div class="work-info">
                        <h3>墨韵悠长</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">数字水墨作品，展现墨韵的悠长之美，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="18">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work21.jpg"></div>
                    <div class="work-info">
                        <h3>墨色变幻</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">动态水墨作品，展现墨色在数字空间中的变幻莫测，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="21">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work24.jpg"></div>
                    <div class="work-info">
                        <h3>墨色流光</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">数字水墨作品，展现墨色流光溢彩的视觉效果，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="24">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="abstract">
                    <div class="work-image" data-src="images/work27.jpg"></div>
                    <div class="work-info">
                        <h3>墨色世界</h3>
                        <p class="work-category">抽象水墨</p>
                        <p class="work-desc">动态水墨作品，展现墨色构建的奇幻世界，传统与现代的完美结合。</p>
                        <a href="#" class="view-work" data-id="27">查看详情</a>
                    </div>
                </div>
                
                <!-- 交互装置 -->
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work1.jpg"></div>
                    <div class="work-info">
                        <h3>墨韵空间</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">沉浸式水墨互动体验，观众的移动将改变水墨的流动与变化，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="1">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work2.jpg"></div>
                    <div class="work-info">
                        <h3>山水琴韵</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">声音交互水墨装置，观众的语音将转化为山川河流的变化，创造视听一体的艺术体验。</p>
                        <a href="#" class="view-work" data-id="2">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work3.jpg"></div>
                    <div class="work-info">
                        <h3>墨舞空间</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">动作交互水墨装置，观众的动作将引发墨色的舞动，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="3">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work4.jpg"></div>
                    <div class="work-info">
                        <h3>墨色光影</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">光影交互水墨装置，观众的移动将改变墨色的光影效果，创造独特的视觉体验。</p>
                        <a href="#" class="view-work" data-id="4">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work5.jpg"></div>
                    <div class="work-info">
                        <h3>墨韵互动</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">多点触摸水墨装置，观众可以通过触摸屏幕与水墨互动，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="5">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work6.jpg"></div>
                    <div class="work-info">
                        <h3>墨色流动</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">动态水墨装置，观众的触摸将引发墨色的流动与变化，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="6">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work7.jpg"></div>
                    <div class="work-info">
                        <h3>墨色空间</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">沉浸式水墨装置，观众可以走进墨色空间，感受水墨的流动与变化。</p>
                        <a href="#" class="view-work" data-id="7">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work8.jpg"></div>
                    <div class="work-info">
                        <h3>墨韵生辉</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">光影交互水墨装置，观众的移动将引发墨色的光影变化，创造独特的视觉体验。</p>
                        <a href="#" class="view-work" data-id="8">查看详情</a>
                    </div>
                </div>
                
                <div class="work-item" data-category="interactive">
                    <div class="work-image" data-src="images/work9.jpg"></div>
                    <div class="work-info">
                        <h3>墨色交响</h3>
                        <p class="work-category">交互装置</p>
                        <p class="work-desc">声音与光影交互水墨装置，观众的声音与光影将引发墨色的交响，创造独特的艺术体验。</p>
                        <a href="#" class="view-work" data-id="9">查看详情</a>
                    </div>
                </div>
            </div>
            
            <div class="load-more" data-category="landscape">
                <button class="load-more-btn">加载更多山水系列</button>
            </div>
            
            <div class="load-more" data-category="bamboo" style="display:none;">
                <button class="load-more-btn">加载更多墨竹系列</button>
            </div>
            
            <div class="load-more" data-category="abstract" style="display:none;">
                <button class="load-more-btn">加载更多抽象水墨系列</button>
            </div>
            
            <div class="load-more" data-category="interactive" style="display:none;">
                <button class="load-more-btn">加载更多交互装置系列</button>
            </div>
            
            <div class="load-more" data-category="all">
                <button class="load-more-btn">加载全部作品</button>
            </div>
        </section>
    </main>
    
    <!-- 作品详情模态框 -->
    <div class="modal" id="workDetailModal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div class="detail-container">
                <div class="detail-image-container">
                    <img src="" alt="" class="detail-image">
                </div>
                <div class="detail-info">
                    <h2 class="detail-title"></h2>
                    <p class="detail-category"></p>
                    <div class="detail-meta">
                        <p class="detail-year"></p>
                        <p class="detail-technique"></p>
                    </div>
                    <div class="detail-description"></div>
                    <div class="detail-techniques">
                        <h4>创作技术</h4>
                        <div class="techniques-list"></div>
                    </div>
                    <div class="detail-inspiration">
                        <h4>创作灵感</h4>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer class="main-footer">
        <div class="footer-content">
            <div class="footer-logo">
                <h2>墨韵</h2>
                <p>数字水墨艺术馆</p>
            </div>
            <div class="footer-links">
                <h4>快速链接</h4>
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">作品集</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="Privacy-Policy.html">隐私政策</a></li>
                </ul>
            </div>
            <div class="footer-contact">
                <h4>联系方式</h4>
                <p><i class="fas fa-envelope"></i> contact@moyun.art</p>
                <p><i class="fas fa-phone"></i> +86 123 4567 8910</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 墨韵数字水墨艺术馆. 保留所有权利.</p>
        </div>
    </footer>
    
    <script src="../js/index.js"></script>
    <script src="../js/zuopin.js"></script>
</body>
</html>